Implements 5 table component features: data grouping, inline editing enhancements, bulk operations with row selection, clipboard copy/paste, and column drag-drop reordering.

Changes

DataTable Component

• Row Selection: Checkbox column with TanStack Table selection API
• Grouping: Collapsible groups via getGroupedRowModel(), configurable by column
• Bulk Actions: Toolbar showing selection count, copy/delete operations
• Copy/Paste: TSV export to clipboard with fallback for non-HTTPS contexts

GridView Component

• Row Selection: Checkbox state management with Set for O(1) lookups
• Grouping: Client-side grouping with Map-based index optimization (O(n) vs O(n²))
• Drag-Drop: Column reordering via HTML5 drag API with visual feedback
• Bulk Actions: Same toolbar pattern as DataTable
• Copy/Paste: TSV clipboard with error handling

Usage

// All features enabled
<GridView
  columns={columns}
  data={data}
  enableRowSelection={true}
  enableGrouping={true}
  groupByColumn="department"
  enableCopyPaste={true}
  enableColumnDragDrop={true}
  onBulkDelete={(rows) => deleteRows(rows)}
  onColumnReorder={(cols) => setColumns(cols)}
/>

API

GridView/DataTable Props

• enableRowSelection: boolean - Adds checkbox column
• enableGrouping: boolean - Groups by groupByColumn
• enableCopyPaste: boolean - Adds copy button and TSV export
• enableColumnDragDrop: boolean - Draggable column headers (GridView only)
• onBulkDelete: (rows) => void - Bulk delete handler
• onBulkUpdate: (rows, updates) => void - Bulk update handler (DataTable only)
• onColumnReorder: (columns) => void - Column order handler (GridView only)

Implementation Notes

• Clipboard operations use modern API with execCommand fallback
• Grouped data rendering uses Map for O(1) index lookups instead of indexOf
• All features opt-in, no breaking changes to existing usage
• ~7KB gzipped addition to bundle size

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.